<template>
  <textarea
    ref="input"
    v-model="layerData.content"
    v-if="editable && layerData.type === 'text'"
    @blur="onBlur"
    placeholder="请输入内容"
    class="input"
  />
  <div
    class="text"
    v-else-if="!editable && layerData.type === 'text'"
    @active="onActive"
  >
    {{layerData.content === '' ? '请输入内容' : layerData.content}}
  </div>
  <div class="layer" v-else>
    <img :src="layerData.content" style='width:100%;height:100%'/>
  </div>
</template>
<script>
import { LayerController } from '../../utils'
export default {
  data () {
    return {
      editable: false
    }
  },
  props: {
    layerData: LayerController
  },
  mounted: function () {
    this.$on('active', this.onActive)
  },
  methods: {
    onActive: function () {
      this.editable = true
      this.$nextTick(function () {
        this.$refs.input.focus()
      })
    },
    onBlur: function () {
      this.editable = false
      this.$parent.$emit('content-inactive')
    }
  }
}
</script>
<style>
.input {
  width: 100%;
  height: 100%;
  position: absolute;
  border: none;
  text-align: center;
  resize: none;
  outline: none;
  overflow-x:hidden;
  overflow-y:hidden;
}
.input:focus {
  background-color: #f1f1f1;
}
.text {
  word-break: break-all;
  overflow-wrap: break-word;
  text-align: center;
  padding: 10px;
}
</style>
